<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #father{
      border: 1px solid red;
    }
    .layer01,.layer02,.layer03{
      display: inline-block;
    }
    .layer01{
      float: left;
    }
    .layer02{
      display: inline-block;
    }
    .layer03{
      display: inline-block;
    }
  </style>
</head>
<body>

<div id="father">
  <div class="layer01"><img src="images/1.png" alt=""></div>
  <div class="layer02"><img src="images/1.jpg" alt=""></div>
  <div class="layer03">浮动的盒子可以向两侧浮动，直到碰到父级最边缘</div>
</div>

</body>
</html>